import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:toolkit/components/toast.dart';
import 'package:toolkit/global.dart';
import 'package:toolkit/http/api.dart';
import 'package:toolkit/iconfont.dart';

class NumberDaxiePage extends StatefulWidget {
  NumberDaxiePage({Key key}) : super(key: key);
  @override
  _NumberDaxiePageState createState() => _NumberDaxiePageState();
}

class _NumberDaxiePageState extends State<NumberDaxiePage> {
  String _money = '';
  String _moneyDaxieString = '';

  @override
  void initState() {
    super.initState();
  }

  void getMoneyDaxie() {
    getMoneyDaxieString(_money).then((value) {
      if (value == null || value['daxie'] == null) {
        Toast.show(context, msg: '金额格式错误', duration: 1);
        return;
      }
      setState(() {
        _moneyDaxieString = value['daxie'];
      });
    });
  }

  Widget renderComparison(String lowerCase, String upperCase) {
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Global.primaryColor, width: 0.2),
        ),
        child: Column(
          children: [
            Container(
              width: 50,
              height: 40,
              decoration: BoxDecoration(
                color: Global.primaryColor.withOpacity(0.1),
              ),
              child: Center(
                child: Text(
                  lowerCase,
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.w600,
                    color: Global.fontColor,
                  ),
                ),
              ),
            ),
            Container(
              width: 50,
              height: 40,
              decoration: BoxDecoration(
                color: Global.primaryColor.withOpacity(0),
              ),
              child: Center(
                child: Text(
                  upperCase,
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.w600,
                    color: Global.primaryColor,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('人民币数字大写转换', style: TextStyle(fontSize: 14)),
        elevation: 0,
        backgroundColor: Global.primaryColor,
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                height: 40,
                decoration: BoxDecoration(
                  color: Global.primaryColor.withOpacity(0.2),
                ),
                child: Center(
                  child: Text(
                    '数字大小写对照表',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                      color: Global.primaryColor,
                    ),
                  ),
                ),
              ),
              Row(
                children: [
                  renderComparison('1', '壹'),
                  renderComparison('2', '贰'),
                  renderComparison('3', '叁'),
                  renderComparison('4', '肆'),
                  renderComparison('5', '伍'),
                  renderComparison('6', '陆'),
                  renderComparison('7', '柒'),
                  renderComparison('8', '捌'),
                ],
              ),
              Row(
                children: [
                  renderComparison('9', '玖'),
                  renderComparison('0', '零'),
                  renderComparison('十', '拾'),
                  renderComparison('百', '佰'),
                  renderComparison('千', '仟'),
                  renderComparison('万', '万'),
                  renderComparison('亿', '亿'),
                  renderComparison('元', '圆'),
                ],
              ),
              Container(
                margin: EdgeInsets.fromLTRB(5, 10, 5, 10),
                padding: EdgeInsets.fromLTRB(5, 4, 5, 4),
                decoration: BoxDecoration(
                  color: Color(0xFFEEC747).withOpacity(0.2),
                  border: Border.all(
                    color: Color(0xFFEEC747),
                  ),
                  borderRadius: BorderRadius.circular(3),
                ),
                child: Row(
                  children: [
                    Icon(
                      IconFont.tip,
                      size: 14,
                      color: Color(0xFFEEC747),
                    ),
                    SizedBox(width: 5),
                    Text(
                      '请输入阿拉伯数字价格，最大支持千亿，小数点后最多支持2位',
                      style: TextStyle(
                        color: Color(0xFFA48625),
                        fontSize: 11,
                      ),
                    )
                  ],
                ),
              ),
              Row(
                children: [
                  Container(
                    margin: EdgeInsets.all(15),
                    padding: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      color: Global.fontColor.withOpacity(.03),
                      border: Border.all(
                        color: Global.fontColor.withOpacity(.5),
                      ),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                        maxWidth: MediaQuery.of(context).size.width - 200,
                      ),
                      child: TextField(
                        maxLines: 1,
                        style: TextStyle(
                          color: Global.fontColor,
                          fontSize: 14,
                        ),
                        inputFormatters: <TextInputFormatter>[
                          WhitelistingTextInputFormatter(
                              RegExp("[0-9.]")), //只允许输入小数
                        ],
                        decoration: InputDecoration.collapsed(
                          hintText: '请输入阿拉伯数字',
                          hintStyle: TextStyle(
                            color: Global.fontSecondColor.withOpacity(0.5),
                            fontSize: 14,
                          ),
                        ),
                        onChanged: (text) {
                          setState(() {
                            setState(() {
                              _money = text;
                              _moneyDaxieString = '';
                            });
                          });
                        },
                      ),
                    ),
                  ),
                  RaisedButton.icon(
                    color: Global.primaryColor,
                    elevation: 5,
                    icon: Icon(
                      IconFont.zhuanhuan,
                      color: Global.backgroundColor,
                      size: 20,
                    ),
                    label: Text(
                      '转换为大写',
                      style: TextStyle(
                        color: Global.backgroundColor,
                        fontSize: 13,
                      ),
                    ),
                    onPressed: () {
                      getMoneyDaxie();
                    },
                  ),
                ],
              ),
              _moneyDaxieString == ''
                  ? Container()
                  : Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            SizedBox(width: 15),
                            Text(
                              _money,
                              style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.w600,
                                color: Global.primaryColor,
                              ),
                            ),
                            Text(
                              ' 元的大写金额为',
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w500,
                                color: Global.fontSecondColor,
                                height: 1.9,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 4),
                        Container(
                          width: MediaQuery.of(context).size.width,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              SizedBox(width: 15),
                              Expanded(
                                child: Text(
                                  _moneyDaxieString,
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Color(0xFFA51717),
                                  ),
                                  maxLines: 2,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
              SizedBox(height: 25),
              Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Global.fontSecondColor.withOpacity(0.2),
                      width: 0.5,
                    ),
                  ),
                ),
              ),
              SizedBox(height: 10),
              Container(
                padding: EdgeInsets.all(16),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '人民币大写数字注意事项',
                      style: TextStyle(
                        fontSize: 13,
                        color: Global.fontSecondColor,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      '中文大写金额数字应用正楷或行书填写，如壹、贰、叁、肆、伍、陆、柒、捌、玖、拾、佰、仟、万、亿、元、角、分、零、整(正)等字样。不得用一、二(两)、三、四、五、六、七、八、九、十、廿、毛、另(或0)填写，不得自造简化字。如果大写数字一到十书写中使用繁体字，如贰、陆、亿、万、圆的，也应受理。',
                      style: TextStyle(
                        fontSize: 12,
                        color: Global.fontSecondColor,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      '一、中文大写金额数字到"元"为止的，在"元"之后，应写"整"(或"正")字，在"角"之后，可以不写"整"(或"正")字。',
                      style: TextStyle(
                        fontSize: 11,
                        color: Global.fontSecondColor,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      '二、中文大写金额数字前应标明"人民币"字样，大写金额数字有"分"的，"分"后面不写"整"(或"正")字。',
                      style: TextStyle(
                        fontSize: 11,
                        color: Global.fontSecondColor,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      '三、大写金额数字应紧接"人民币"字样填写，不得留有空白。大写金额数字前未印"人民币"字样的，应加填"人民币"三字。在票据和结算凭证大写金额栏内不得预印固定的"仟、佰、拾、万、仟、佰、拾、元、角、分"字样。',
                      style: TextStyle(
                        fontSize: 11,
                        color: Global.fontSecondColor,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      '四、阿拉伯数字小写金额数字中有"0"时，中文大写应按照汉语语言规律、金额数字构成和防止涂改的要求进行书写。',
                      style: TextStyle(
                        fontSize: 11,
                        color: Global.fontSecondColor,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
